<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-show="loading">Loading...</dv-loading>
      <div class="host-body">
        <div>
          <!-- 顶部title部分 -->
          <el-row>
            <el-col :span="6"
            ><dv-decoration-8
              class="title_right"
              :color="['#008CFF', '#00ADDD']"
            /></el-col>
            <el-col :span="12"
            ><div class="title_text">人才需求数据分析与可视化系统</div>
              <dv-decoration-5
                class="title_center"
                :color="['#008CFF', '#00ADDD']"
              /></el-col>
            <el-col :span="6"
            ><div class="title_time">{{ dateYear + dateWeek + dateDay }}</div>
              <dv-decoration-8
                :reverse="true"
                class="title_left"
                :color="['#008CFF', '#00ADDD']"
              /></el-col>
          </el-row>
          <!-- 主体部分 -->
          <el-row>
            <!-- 第一列 -->
            <el-col :span="6">
              <!-- 饼图部分 -->
              <div class="left_box1">
                <dv-border-box-12>
                  <div id="Rose_diagram"></div>
                  <dv-active-ring-chart
                    :config="config"
                    class="left_box1_rose_right"
                  />

                </dv-border-box-12>
              </div>
              <!-- 柱状图部分 -->
              <div class="left_box2">
                <dv-border-box-12 style="padding-top: 10px">
                  <p style="margin-left: 15px">薪资统计图</p>
                  <div id="columnar"></div>
                </dv-border-box-12>
              </div>

            </el-col>
            <!-- 第二列 -->
            <el-col :span="12">
              <div
                class="rose_text"
                v-for="(item, index) in numberData"
                :key="index"
              >
                <p>
                      <span class="rose_text_nmb" >{{
                        item.number
                      }}</span>
                </p>
                <p>
                  <span>{{ item.text }}</span>
                  <span class="colorYellow">(条)</span>
                </p>
              </div>
              <!-- 中国地图 -->
              <div id="china-map"></div>
              <!-- 折线图 -->
              <div class="line_center">
                <dv-border-box-8>
                  <div id="line_center_diagram"></div>
                </dv-border-box-8>
              </div>
            </el-col>
            <!-- 第三列 -->
            <el-col :span="6">
              <!-- 轮播排行榜部分 -->
              <div class="right_box1">
                <dv-border-box-12>
                  <dv-decoration-7 style="width: 100%; height: 30px"
                  >招 聘 排 行 榜</dv-decoration-7
                  >
                  <dv-scroll-ranking-board
                    :config="config"
                    style="width: 95%; height: 87%; margin-left: 2%"
                  />
                </dv-border-box-12>
              </div>
            <!--  &lt;!&ndash; 虚线柱状图部分 &ndash;&gt;
              <div class="right_box2">
                <dv-border-box-12 :reverse="true">
                  <div id="dotter_bar"></div>
                </dv-border-box-12>
              </div>-->
              <!-- 部分 -->
              <div class="left_box3">
                <dv-border-box-12 style="padding-top: 10px">
                  <dv-scroll-board
                    :config="board_info"
                    class="carousel_list"
                    oddRowBGC="#fff"
                  />
                </dv-border-box-12>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import drawMixin from "../../../utils/drawMixin"; //自适应缩放
  import {formatTime} from "../../../utils"; //日期格式转换
  import * as echarts from "echarts";
  import "echarts-wordcloud/dist/echarts-wordcloud";
  import "echarts-wordcloud/dist/echarts-wordcloud.min";
  import {getConfigData, getNumberData,getColumnarData,getGiftWords,getSalaryByExperience,getConeData} from "@/api/echarts/echarts";


  export default {
    mixins: [drawMixin],
    data() {
      return {
        //定时器
        timing: null,
        //loading图
        loading: true,
        //时分秒
        dateDay: null,
        //年月日
        dateYear: null,
        //周几
        dateWeek: null,
        //周几
        weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        //轮播排行榜
        config:{
          data:[],
        },
        cityData:[],
        cityDataMax:[],
        cityDataMin:[],
        //左侧饼图文字
        numberData: [],
        //左侧轮播表格配置项
        board_info: {

        },
        // 定义颜色
        colorList: {
          linearYtoG: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#f5b44d",
              },
              {
                offset: 1,
                color: "#28f8de",
              },
            ],
          },
          linearGtoB: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#43dfa2",
              },
              {
                offset: 1,
                color: "#28f8de",
              },
            ],
          },
          linearBtoG: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#1c98e8",
              },
              {
                offset: 1,
                color: "#28f8de",
              },
            ],
          },
          areaBtoG: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(35,184,210,.2)",
              },
              {
                offset: 1,
                color: "rgba(35,184,210,0)",
              },
            ],
          },
        },
        //锥形柱状图
        cone: {
          // data:[],
          // showValue: true,
        },
        giftWords:[],
        salaryByExperience:[],
        experienceByExperience:[],
      };
    },
created() {
},
    mounted() {
      // this.enterFullscreen();
      this.getNumberData();
      this.getConfigData();
      this.getColumnarData();
      this.getGiftWords();
      this.getSalaryAndExperience();
      this.getConeData();
      //获取实时时间
      this.timeFn();
      //加载loading图
      this.cancelLoading();
      //中国地图
      // this.china_map();
      //左侧玫瑰饼图
      this.Rose_diagram();
      //左侧柱状图
      // this.columnar();
      //中间折线图
      // this.line_center_diagram();
      //虚线柱状图
      this.dotter_bar();
    },
    beforeDestroy() {
      //离开时删除计时器
      clearInterval(this.timing);
    },
    methods: {
      enterFullscreen(){
        document.documentElement.requestFullscreen();
      },
      //左上角数据
      getNumberData(){
        getNumberData().then(response => {
          this.numberData=response.data;
          console.log("this.numberData:"+this.numberData)
        });
      },
      //左上玫瑰数据
      getConfigData() {
        const configData=[];
        getConfigData().then(
          response => {
            response.data.forEach((item) => {
              configData.push(
                {
                  name:item.name,
                  value:item.value
                });
            });
            this.config={
              data:configData
            }
          })
      },
      //右下数据
      getConeData() {
        const coneData=[];
        getConeData().then(
          response => {
            response.data.forEach((item) => {
              coneData.push(
                [
                  item.name,
                  item.value
                ]);
            });
            this.board_info={
              data:coneData,
              rowNum: 8,
              header: ["行业", "数量"],
              evenRowBGC: "#020308",
              oddRowBGC: "#382B47",
              headerBGC: "#020308",
            }
          })
      },
      getGiftWords() {
        getGiftWords().then(
          response => {
            this.giftWords=response.data;
            /*response.data.forEach((item) => {
              this.giftWords.push(
                {
                  name:item.name,
                  value:item.value
                });
            });*/
            this.china_map();
          })
      },
      getSalaryAndExperience() {
        getSalaryByExperience().then(
          response => {
            this.giftWords=response.data;
            this.salaryByExperience=response.data.salaryByExperience;
            this.experienceByExperience=response.data.experienceByExperience;
            this.line_center_diagram();
          })
      },
      getColumnarData(){
        getColumnarData().then(
          response => {
            this.cityData=response.data.cityData;
            this.cityDataMin=response.data.cityDataMin;
            this.cityDataMax=response.data.cityDataMax;
            this.columnar();
          })
      },

      //右上角当前日期时间显示：每一秒更新一次最新时间
      timeFn() {
        this.timing = setInterval(() => {
          //获取当前时分秒
          this.dateDay = formatTime(new Date(), "HH: mm: ss");
          //获取当前年月日
          this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
          //获取当前周几
          this.dateWeek = this.weekday[new Date().getDay()];
        }, 1000);
      },
      //loading图
      cancelLoading() {
        setTimeout(() => {
          this.loading = false;
        }, 500);
      },
      //中国地图
      china_map() {
        let mapChart = this.$echarts.init(
          document.getElementById("china-map")
        ); //图表初始化，china-map是绑定的元素
        window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
        this.option = {
          tooltip: {
            show: true,
            position: "top",
            formatter: (params) => {
              return `${params.marker}${params.name} : 大小${params.value}`;
            },
            textStyle: {
              fontSize: 14,
            },
          },
          series: [
            {
              type: "wordCloud",
              // 网格大小，各项之间间距
              gridSize: 15,
              // 形状 circle 圆，cardioid  心， diamond 菱形，triangle-forward 、triangle 三角，star五角星
              shape: "diamond",
              // 字体大小范围
              sizeRange: [16, 100],
              // 文字旋转角度范围
              rotationRange: [0, 50],
              // 旋转步值
              rotationStep: 40,
              left: "center",
              top: "center",
              right: null,
              bottom: null,
              // 画布的宽
              // width: "90%",
              // 画布的高
              // height: "90%",
              // 是否渲染超出画布的文字
              drawOutOfBound: false,
              textStyle: {
                normal: {
                  color: function() {
                    return(
                      "rgb(" +
                      Math.round(Math.random() * 255) +
                      ", " +
                      Math.round(Math.random() * 255) +
                      ", " +
                      Math.round(Math.random() * 255) +
                      ")"
                    );
                  }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: "#2ac",
                },
              },
              geo: {
                zoom: 1,
                scaleLimit: {
                  min: 0.5,
                  max: 2,
                },
              },
              data: this.giftWords,
            },
          ],
        };
        mapChart.setOption(this.option); //生成图表
      },

      //玫瑰饼图
      Rose_diagram() {
        let mapChart = this.$echarts.init(
          document.getElementById("Rose_diagram")
        ); //图表初始化，china-map是绑定的元素
        window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
        let option = {
          color: [
            "#37a2da",
            "#32c5e9",
            "#9fe6b8",
            "#ffdb5c",
            "#ff9f7f",
            "#fb7293",
            "#e7bcf3",
            "#8378ea",
          ],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          toolbox: {
            show: true,
          },

        };
        mapChart.setOption(option); //生成图表
      },
      //柱状图
      columnar() {
        let mapChart = this.$echarts.init(document.getElementById("columnar")); //图表初始化，china-map是绑定的元素
        window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
        let option = {
          title: {
            text: "",
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC",
              },
            },
          },
          legend: {
            data: ["最低薪资", "最高薪资", "占比率"],
            textStyle: {
              color: "#B4B4B4",
            },
            top: "0%",
          },
          grid: {
            x: "10%",
            width: "95%",
            y: "10%",
          },
          xAxis: {
            data: this.cityData,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4",
                },
              },

              /*axisLabel: {
                formatter: "{value} ",
              },*/
            },
          ],
          series: [
            {
              name: "最低薪资",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" },
                  ]),
                },
              },
              data: this.cityDataMin
            },
            {
              name: "最高薪资",
              type: "bar",
              barGap: "-100%",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(156,107,211,0.8)" },
                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                    { offset: 1, color: "rgba(156,107,211,0.2)" },
                  ]),
                },
              },
              z: -12,
              data: this.cityDataMax,
            },
          ],
        };
        mapChart.setOption(option); //生成图表

      },
      //折线图
      line_center_diagram() {
        let mapChart = this.$echarts.init(
          document.getElementById("line_center_diagram")
        ); //图表初始化，china-map是绑定的元素
        window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
        let option = {
          tooltip: {
            axisPointer: {
              type: "line",
            },
          },
          xAxis: {
            type: "category",
            data: this.experienceByExperience,
            position: "bottom",
            axisLine: true,
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12,
            },
          },
          yAxis: {
            type: "value",
            name: "工作经验工资",
            nameLocation: "end",
            nameGap: 24,
            nameTextStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: 14,
            },
            splitNumber: 4,
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                opacity: 0.1,
              },
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12,
            },
          },
          grid: {
            left: 50,
            right: 10,
            bottom: 25,
            top: "18%",
          },
          series: [
            {
              data: this.salaryByExperience,
              type: "line",
              smooth: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: "#fff",
                },
              },
              //线的颜色样式
              lineStyle: {
                normal: {
                  color: this.colorList.linearBtoG,
                  width: 3,
                },
              },
              //填充颜色样式
              areaStyle: {
                normal: {
                  color: this.colorList.areaBtoG,
                },
              },
            },
          ],
        };
        mapChart.setOption(option); //生成图表
      },
      //右侧虚线柱状图图
      dotter_bar() {
        let mapChart = this.$echarts.init(document.getElementById("dotter_bar")); //图表初始化，china-map是绑定的元素
        window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
        // Generate data
        let category = [];
        let dottedBase = +new Date();
        let lineData = [];
        let barData = [];
        for (let i = 0; i < 20; i++) {
          let date = new Date((dottedBase += 3600 * 24 * 1000));
          category.push(
            [date.getFullYear(), date.getMonth() + 1, date.getDate()].join("-")
          );
          let b = Math.random() * 200;
          let d = Math.random() * 200;
          barData.push(b);
          lineData.push(d + b);
        }
        // option
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "",
            },
          },
          grid: {
            left: 50,
            right: 10,
            bottom: 25,
            top: "18%",
          },
          legend: {
            data: ["line", "bar"],
            textStyle: {
              color: "#ccc",
            },
          },
          xAxis: {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          yAxis: {

            data: category,
            axisLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          series: [
            {
              name: "line",
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 15,
              data: lineData,
            },
            {
              name: "bar",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                borderRadius: 5,
                // color: "#14c8d4",
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#14c8d4" },
                  { offset: 1, color: "#43eec6" },
                ]),
              },
              data: barData,
            },
            {
              name: "line",
              type: "bar",
              barGap: "-100%",
              barWidth: 10,
              itemStyle: {
                // color: "rgba(20,200,212,0.5)",
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(20,200,212,0.5)" },
                  { offset: 0.2, color: "rgba(20,200,212,0.2)" },
                  { offset: 1, color: "rgba(20,200,212,0)" },
                ]),
              },
              z: -12,
              data: lineData,
            },
            {
              name: "dotted",
              type: "pictorialBar",
              symbol: "rect",
              itemStyle: {
                color: "#0f375f",
              },
              symbolRepeat: true,
              symbolSize: [12, 4],
              symbolMargin: 1,
              z: -10,
              data: lineData,
            },
          ],
        };
        mapChart.setOption(option); //生成图表
      },
    },
  };
</script>

<style lang="scss">
  //全局样式部分！！！！
  * {
    margin: 0;
    padding: 0;
    list-style-type: none;
    outline: none;
    box-sizing: border-box;
  }
  html {
    margin: 0;
    padding: 0;
  }
  body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
  }
  a {
    color: #343440;
    text-decoration: none;
  }
  //--------------------------------------------

  //页面样式部分！！！！
  #index {
    color: #d3d6dd;
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    overflow: hidden;
    .bg {
      //整体页面背景
      width: 100%;
      height: 100%;
      padding: 16px 16px 0 16px;
      /*background-image: url("../assets/pageBg.png"); //背景图*/
      /*background-size: cover; //背景尺寸*/
      /*background-position: center center; //背景位置*/
      background-color: black;
    }
    //顶部右边装饰效果
    .title_left {
      width: 100%;
      height: 50px;
    }
    //顶部左边装饰效果
    .title_right {
      width: 100%;
      height: 50px;
      margin-top: 18px;
    }
    //顶部中间装饰效果
    .title_center {
      width: 100%;
      height: 50px;
    }
    //顶部中间文字数据可视化系统
    .title_text {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      margin-top: 14px;
      color: #008cff;
    }
    //时间日期
    .title_time {
      text-align: center;
    }
    //中国地图
    #china-map {
      height: 580px;
      width: 100%;
    }
    //中间折线图
    .line_center {
      width: 100%;
      height: 290px;
    }
    //左1模块
    .left_box1 {
      height: 310px;
      width: 100%;
      margin-bottom: 10px;
      position: relative;
    }
    //左2模块
    .left_box2 {
      height: 630px;
      width: 100%;
      margin-bottom: 10px;
    }
    //左3模块
    .left_box3 {
      height: 630px;
      width: 100%;
    }
    //右1模块
    .right_box1 {
      height: 310px;
      width: 100%;
      margin-bottom: 10px;
    }

    //右3模块
    .right_box3 {
      height: 310px;
      width: 100%;
    }

    //左1模块-圆环图
    .left_box1_rose_right {
      height: 100%;
      width: 100%;
      position: absolute;
      right: 0;
      top: 0;
    }
    //左1模块-文字部分
    .rose_text {
      display: inline-block;
      margin-top: 4%;
      margin-left: 4%;
    }

    //左1模块-（件）样式
    .colorYellow {
      color: yellowgreen;
    }
    //左1模块-数字样式
    .rose_text_nmb {
      font-size: 20px;
      color: #00b891;
    }
    //左2模块 柱状图
    #columnar {
      height: 97%;
      width: 95%;
      margin-left: 3%;
      margin-top: 5px;
    }
    //折线图
    #line_center_diagram {
      height: 100%;
      width: 100%;
    }
    //轮播表格
    .carousel_list {
      width: 96%;
      height: 98%;
      margin-left: 10px;
    }
    //虚线柱状图
    #dotter_bar {
      width: 100%;
      height: 100%;
    }
    //锥形图
    .cone_box {
      width: 95%;
      height: 97%;
      margin-left: 3%;
    }
  }
</style>

